<template>
	<view class="tabbar" :style="{ paddingBottom: safeAreaInsetsBottom + 'px' }">
		<!-- 首页按钮 -->
		<view class="tab-item" @click="switchTab(0)">
			<!-- <i class="iconfont icon-home" :class="activeIndex === 0 ? 'activeimg' : 'img'"></i> -->
			<image class="img" v-if="activeIndex === 0" src="/static/tabbar/activehome.svg" />
			<image class="img" v-else src="/static/tabbar/home.png" />
			<text :class="{ active: activeIndex === 0 }">首页</text>
		</view>

		<!-- 凸出的发布按钮 -->
		<view class="publish-btn" @click="navigateToPublish">
			<view class="btn-inner">
				<image class="img" src="/static/tabbar/AR.svg" />
				<view>AR园区</view>
			</view>
		</view>

		<!-- 我的按钮 -->
		<view class="tab-item" @click="switchTab(2)">
			<!-- <i class="iconfont icon-user" :class="activeIndex === 2 ? 'activeimg' : 'img'"></i> -->
			<image class="img" v-if="activeIndex === 2" src="/static/tabbar/activeuser.svg" />
			<image class="img" v-else src="/static/tabbar/user.svg" />
			<text :class="{active:activeIndex===2}">我的</text>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		onShow
	} from '@dcloudio/uni-app';

	onShow(() => {
		const routes = getCurrentPages();
		const currentRoute = routes[routes.length - 1].route;
		const tabIndexMap = {
			'pages/index/index': 0,
			'pages/user/user': 2
		};
		activeIndex.value = tabIndexMap[currentRoute] ?? -1;
	});
	const activeIndex = ref(0);
	const safeAreaInsetsBottom = ref(0); // 安全区域高度

	// 获取安全区域
	const getSafeArea = () => {
		const res = uni.getWindowInfo();
		safeAreaInsetsBottom.value = res.safeAreaInsets.bottom;
	};

	// 切换Tab
	const switchTab = async (index) => {
		if (index === 2) { // 点击"我的"页面
			try {
				// 检查本地token
				const token = uni.getStorageSync('token');
				if (!token?.access_token || token.expires_at <= Date.now() + 300000) {
					// 尝试静默登录
					uni.showLoading({
						title: '检查登录状态...',
						mask: true
					});
					await uni.$emit('checkLoginStatus');
					uni.hideLoading();
				}
			} catch (error) {
				console.error('登录检查失败:', error);
			}
		}

		activeIndex.value = index;
		const pages = ['/pages/index/index', '', '/pages/user/user'];
		if (pages[index]) uni.switchTab({
			url: pages[index]
		});
	};
	// 跳转到发布页
	const navigateToPublish = () => {
		uni.navigateTo({
			url: '/pages/center/center'
		});
	};

	onMounted(() => {
		getSafeArea();
	});
</script>

<style lang="scss" scoped>
	.tabbar {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 100rpx;
		background: white;
		display: flex;
		justify-content: space-around;
		align-items: center;
		// box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
		z-index: 999;
		background: #ffffff;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 22rpx;
		color: #C7C7C7;
		line-height: 36rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;

		.tab-item {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;

			.img {
				width: 60rpx;
				height: 60rpx;
			}



			.active {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 22rpx;
				color: #000000;
				line-height: 36rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}
		}

		.btn-inner {
			position: absolute;
			top: -30rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			// background: linear-gradient(45deg, #ff9800, #ff5500);
			// box-shadow: 0 8rpx 20rpx rgba(255, 87, 34, 0.3);
			background: #ffffff;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.img {
				width: 74rpx;
				height: 74rpx;
			}
		}


	}



	.publish-btn {
		position: relative;
		width: 100rpx;
		height: 100rpx;
		margin-bottom: 40rpx;

		.img {
			width: 74rpx;
			height: 74rpx;
		}
	}
</style>